import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { PageHeader, Row, Col, Card, List } from 'antd';
import './News.css'
import { NavLink } from 'dva/router';
import _ from 'lodash'

export default function News() {
    useEffect(() => {
        axios('/news?publishState=2&_expand=category').then(res => {
            // console.log(_.groupBy(res.data,item=>item.category.label));
            // entries将对象转化为数组(内部groupBy将数据根据label分类)
            // console.log(Object.entries(_.groupBy(res.data, item => item.category.label)));
            setlist(Object.entries(_.groupBy(res.data, item => item.category.label)))
        })
    }, [])
    // 新闻数据
    const [list, setlist] = useState([])
    return (
        <div style={{ width: '95%', margin: '0 auto' }}>
            <PageHeader
                className="site-page-header"
                onBack={() => null}
                title="全球大新闻"
                subTitle="查看新闻"
            />
            <div className="site-card-wrapper">
                {/* gutter:Col左右，上下间距 */}
                <Row gutter={[16, 16]}>
                    {
                        list.map(item =>
                            <Col span={8} key={item[0]}>
                                <Card title={item[0]} bordered={true} hoverable={true}>
                                    <List
                                        size="small"
                                        // bordered
                                        dataSource={item[1]}
                                        pagination={{
                                            pageSize: 3
                                        }}
                                        renderItem={(data) => <List.Item>
                                            <NavLink to={`/detail/${data.id}`}>{data.label}</NavLink>
                                        </List.Item>}
                                    />
                                </Card>
                            </Col>
                        )
                    }
                </Row>
            </div>
        </div>
    )
}
